<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="错题收藏"
    >
      <template #right>
        <div @click="popups">设置</div>
      </template>
    </van-nav-bar>
    <!-- 
       @change="onChange":是监听事件
    -->
    <van-swipe
      class="My-slideshow"
      :loop="false"
      :show-indicators="false"
      indicator-color="white"
      @change="onChange"
      ref="checkbox"
    >
      <van-swipe-item v-for="(item, index) in answer" :key="index">
        <div class="answer-sheet">
          <div class="answer-title">
            <span>单选</span>
            {{ item.qContext }}
          </div>
          <div v-if="item.qPicture" class="reference-information">
            <img :src="item.qPicture" />
          </div>

          <div class="choice-question">
            <!-- 选项A -->
            <div
              v-if="item.qOptionA"
              @click="confirm('A', item.rightAnswer, item.qId)"
            >
              <p v-if="RightWrong">A</p>
              <div v-else class="choice-addition">
                <img v-if="dui" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
              </div>
              <p v-if="FontSize">{{ item.qOptionA }}</p>
              <!-- FontColor如果是true，则显示字体颜色是蓝色，如果false，则表示答错，字体颜色为红色 -->
              <p v-if="FontBlue" :class="[FontBlue ? 'blueness' : '']">
                {{ item.qOptionA }}
              </p>
              <p v-if="FontRed" :class="[FontRed ? 'redness' : '']">
                {{ item.qOptionA }}
              </p>
            </div>

            <!-- 选项B -->
            <div
              v-if="item.qOptionB"
              @click="confirm('B', item.rightAnswer, item.qId)"
            >
              <p v-if="BRightWrong">B</p>
              <div v-else class="choice-addition">
                <img v-if="Bdui" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
              </div>

              <p v-if="BFontSize">{{ item.qOptionB }}</p>
              <!-- FontColor如果是true，则显示字体颜色是蓝色，如果false，则表示答错，字体颜色为红色 -->
              <p v-if="BFontBlue" :class="[BFontBlue ? 'blueness' : '']">
                {{ item.qOptionB }}
              </p>
              <p v-if="BFontRed" :class="[BFontRed ? 'redness' : '']">
                {{ item.qOptionB }}
              </p>
            </div>

            <!-- 选项C -->
            <div
              v-if="item.qOptionC"
              @click="confirm('C', item.rightAnswer, item.qId)"
            >
              <p v-if="CRightWrong">C</p>
              <div v-else class="choice-addition">
                <img v-if="Cdui" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
              </div>

              <p v-if="CFontSize">{{ item.qOptionC }}</p>
              <!-- FontColor如果是true，则显示字体颜色是蓝色，如果false，则表示答错，字体颜色为红色 -->
              <p v-if="CFontBlue" :class="[CFontBlue ? 'blueness' : '']">
                {{ item.qOptionC }}
              </p>
              <p v-if="CFontRed" :class="[CFontRed ? 'redness' : '']">
                {{ item.qOptionC }}
              </p>
            </div>

            <!-- 选项D -->
            <div
              v-if="item.qOptionD"
              @click="confirm('D', item.rightAnswer, item.qId)"
            >
              <p v-if="DRightWrong">D</p>
              <div v-else class="choice-addition">
                <img v-if="Ddui" src="../../assets/images/duihao.png" alt />
                <img v-else src="../../assets/images/cuo.png" alt />
              </div>

              <p v-if="DFontSize">{{ item.qOptionD }}</p>
              <!-- FontColor如果是true，则显示字体颜色是蓝色，如果false，则表示答错，字体颜色为红色 -->
              <p v-if="DFontBlue" :class="[DFontBlue ? 'blueness' : '']">
                {{ item.qOptionD }}
              </p>
              <p v-if="DFontRed" :class="[DFontRed ? 'redness' : '']">
                {{ item.qOptionD }}
              </p>
            </div>
          </div>
          <!-- 答案技巧 题目解析 交友互动 -->
          <div v-if="mistake" class="synthesize">
            <div class="solution">答案：{{ item.rightAnswer }}</div>
            <!-- 试题讲解 -->
            <div class="item-explain">
              <div class="caption-title">
                <div></div>
                <p>试题讲解</p>
                <div></div>
              </div>

              <!-- 题目解析 -->
              <div class="topic-analysis">
                <!-- 标题 -->
                <div>
                  <div></div>
                  <p>题目解析</p>
                </div>
                <div>{{ item.explan }}</div>
                <div class="testing-centre">
                  考点：
                  <span>事故处理</span>
                </div>
                <!-- 难度 考友错误率  -->
                <div class="testing-difficulty">
                  <div>
                    <div>难度</div>
                    <van-rate
                      v-model="value"
                      color="#ffd21e"
                      void-icon="star"
                      :size="18"
                      void-color="#eee"
                      :readonly="true"
                    />
                  </div>
                  <div>网友错误率:3.7%</div>
                </div>
              </div>
            </div>

            <!-- 交友互动 -->
            <!-- <div class="item-explain">
              <div class="caption-title">
                <div></div>
                <p>交友互动</p>
                <div></div>
              </div>

              题目解析
              <div class="topic-analysiss">
                标题
                <div>
                  <div></div>
                  <p>全部点评</p>
                </div>

                点评内容
                <div class="evaluation-content">
                  <img src="../../assets/car3.jpg" alt />
                  <div class="appraise">
                    <div>
                      <p>一点通5658</p>
                      <div>
                        <img src="../../assets/images/16.png" alt />
                        <div>281</div>
                      </div>
                    </div>
                    <div>按照规定悬挂牌号，检验合格标志</div>
                  </div>
                </div>
                <div class="evaluation-content">
                  <img src="../../assets/car3.jpg" alt />
                  <div class="appraise">
                    <div>
                      <p>一点通5658</p>
                      <div>
                        <img src="../../assets/images/16.png" alt />
                        <div>281</div>
                      </div>
                    </div>
                    <div>按照规定悬挂牌号，检验合格标志</div>
                  </div>
                </div>
                <div class="evaluation-content">
                  <img src="../../assets/car3.jpg" alt />
                  <div class="appraise">
                    <div>
                      <p>一点通5658</p>
                      <div>
                        <img src="../../assets/images/16.png" alt />
                        <div>281</div>
                      </div>
                    </div>
                    <div>按照规定悬挂牌号，检验合格标志</div>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
    <div class="subject-content">
      <div class="subject-head">
        <div @click="remove">
          <img src="../../assets/images/shanchu.png" />
          <p>移除</p>
        </div>
        <div class="right-question">
          <!-- 对与错 -->
          <div class="right-wrong">
            <!-- 对 -->
            <div>
              <img src="../../assets/dui.png" alt />
              <p>{{ correct }}</p>
            </div>
            <!-- 错 -->
            <div>
              <img src="../../assets/cuo.png" alt />
              <p>{{ errors }}</p>
            </div>
          </div>

          <!-- 题号 -->
          <div @click="reveal" class="question-number">
            <img src="../../assets/liebiao.png" alt />
            <div>{{ sequence + 1 }}/{{ complete }}</div>
          </div>
        </div>
      </div>
      <!-- 题号列表 -->

      <div v-if="show" class="sequence-number">
        <div
          v-for="(item, index) in complete"
          :key="index"
          :class="[
            sequence == index ? 'tinct' : '',
            array[index] == '1' ? 'dadui' : '',
            array[index] == '2' ? 'dacuo' : ''
          ]"
          @click="selectTopic(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <van-popup
      v-model="popping"
      round
      position="bottom"
      :style="{ height: '20%' }"
    >
      <van-cell center title="答对跳转下一题">
        <template #right-icon>
          <van-switch v-model="checked" size="24" />
        </template>
      </van-cell>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
// import { Toast } from "vant";

import { MistakesCollect, RemoveMistakes } from "../../assets/js/api/exam.js";
export default {
  name: "MistakesCollect",
  data() {
    return {
      value: 3,
      checked: true,
      popping: false, // 设置控制的弹出层
      show: false, // 控制题号的显示隐藏
      pagination: 0, // 当前页数
      mistake: false, // 控制答案，试题解析和交友互动的显示隐藏
      favorite: false, // 隐藏显示收藏按钮
      statistics: 0, // 统计答题点击次数，只能点击一次 1：答对，2：打错
      sequence: 0, // 序号，来判断对应的是哪一个题
      image: false,
      array: [], // 定义一个 空数组，来储存这个答题正确还是错误
      complete: 0, // 全部是多少道题
      errors: 0, // 答错题的统计
      correct: 0, // 答对题的统计

      // A选项
      RightWrong: true, // 当点击选项之后，判断对和错，如果是错的就显示图片，对就不变
      dui: false, // 用来控制对的显示和隐藏
      FontBlue: false, // 当答完题之后，如果要是答对，就显示
      FontRed: false, // 当答完题之后，如果要是答错，就显示
      FontSize: true, // 未答题之前，显示的
      // B 选项
      BRightWrong: true, // 当点击选项之后，判断对和错，如果是错的就显示图片，对就不变
      Bdui: false, // 用来控制对的显示和隐藏
      BFontBlue: false, // 当答完题之后，如果要是答对，就显示
      BFontRed: false, // 当答完题之后，如果要是答错，就显示
      BFontSize: true, // 未答题之前，显示的
      // C 选项
      CRightWrong: true, // 当点击选项之后，判断对和错，如果是错的就显示图片，对就不变
      Cdui: false, // 用来控制对的显示和隐藏
      CBFontBlue: false,
      CFontBlue: false, // 当答完题之后，如果要是答对，就显示
      CFontRed: false, // 当答完题之后，如果要是答错，就显示
      CFontSize: true, // 未答题之前，显示的
      // D 选项
      DRightWrong: true, // 当点击选项之后，判断对和错，如果是错的就显示图片，对就不变
      Ddui: false, // 用来控制对的显示和隐藏
      DFontBlue: false, // 当答完题之后，如果要是答对，就显示
      DFontRed: false, // 当答完题之后，如果要是答错，就显示
      DFontSize: true, // 未答题之前，显示的

      // 答题
      database: [], // 数据
      object: {
        rightAnswer: "", // 正确答案
        wrongAnswer: "", // 当打错时储存答案
        bePrepared: "", // 已经答过那道题
        index: ""
      }, // 数组中添加对象
      answer: [],
      result: [], // 储存正确答案，
      inaccuracy: [], //储存错误答案
      store: [] // 当答题打错时，储存正确的答案
    };
  },

  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
    MistakesCollect().then(res => {
      // console.log(res.data.length);
      localStorage.setItem("mistakes", res.data.length);
      // console.log(res);
      if (res.code == 0) {
        this.answer = res.data;
        this.complete = res.data.length;
        // 新建一个数组，来储存学员已经答过题
        this.array = new Array(this.complete);
        // 新建一个数组，来储存学员答对题
        this.database = new Array(this.complete);
      }
    });
  },

  // 在页面销毁之前执行的
  beforeDestroy() {
    if (!(Number(this.correct) + Number(this.errors) == 0)) {
      localStorage.setItem(
        "enshrine",
        Number(this.correct) + Number(this.errors)
      );
    }
  },

  methods: {
    // 移除收藏夹里的题
    remove() {
      if (this.answer.length == 0) {
        Toast("没有收藏的题，请收藏之后再试");
        return;
      }
      // for(let i=0;i<this.answer.length;i++){
      //   if(i == this.sequence){}
      // }
      // console.log(this.answer[this.sequence].qId);
      let obj = {
        qId: this.answer[this.sequence].qId
      };
      RemoveMistakes(obj).then(res => {
        // console.log(res);
        if (res.code == 0) {
          // for (let i = 0; i < this.database.length; i++) {
          //   if (this.database[i].qId == this.answer[this.sequence].qId) {
          //     this.database.splice(i, 1);
          //   }
          // }
          // correct errors
          console.log(this.database[this.sequence]);
          if (this.database[this.sequence] != undefined) {
            if (
              this.database[this.sequence].rightAnswer ==
              this.database[this.sequence].wrongAnswer
            ) {
              this.correct--;
              if (this.correct < 0) {
                this.correct = 0;
              }
            }
            if (
              this.database[this.sequence].rightAnswer !=
              this.database[this.sequence].wrongAnswer
            ) {
              this.errors--;
              if (this.errors < 0) {
                this.errors = 0;
              }
            }
          }

          this.database[this.sequence] = "";
          for (let i = 0; i < this.answer.length; i++) {
            if (this.answer[i].qId == this.answer[this.sequence].qId) {
              if (this.sequence < this.answer.length) {
                this.sequence = this.sequence - 1;
              }
              if (this.sequence < 0) {
                this.sequence = 0;
              }
              // console.log(this.sequence, this.answer.length);
              this.answer.splice(i, 1);
              this.complete = this.answer.length;
            }
          }

          this.$refs.checkbox.swipeTo(this.sequence);
          Toast.success("移除成功");
        }
        // console.log(this.answer);
        // console.log(this.database);
      });
      // console.log(this.sequence);
    },

    // 设置控制的弹出层
    popups() {
      this.popping = true;
    },

    // 判断答题是否正确
    confirm(id, answer, qId) {
      // console.log(id);
      // 首先判断是否是第一次点击，如果是第一次，就判断答题是否正确，如果不是第一次 ，就让他不执行点击操作

      // console.log(this.database);
      if (this.array[this.sequence] == undefined) {
        this.ClearAway();
        // A 选项
        if (id == "A") {
          if (id == answer) {
            this.statistics = 1;
            this.correct++;
            // Toast.success("正确");
            // 当答题正确时
            this.RightWrong = false;
            this.dui = true;
            this.FontSize = false;
            this.DFontRed = false;
            this.FontBlue = true;
            // 储存当前状态
            // this.object = new
            let object = {
              rightAnswer: "", // 正确答案
              wrongAnswer: "", // 当打错时储存答案
              bePrepared: "", // 已经答过那道题
              index: "",
              qId: ""
            }; // 数组中添加对象
            object.rightAnswer = answer;
            object.wrongAnswer = id;
            object.bePrepared = this.sequence;
            object.qId = qId;
            // console.log("我是：" + this.sequence);
            this.database[this.sequence] = object;
            // console.log(this.database);
            if (this.checked) {
              this.autoTimer = setInterval(() => {
                this.$refs.checkbox.next();
                clearInterval(this.autoTimer);
                // return;
              }, 100);
            }
            //
            // console.log("当前页数" + this.pagination);
            this.result[this.sequence] = answer;
            this.array[this.sequence] = 1;
          } else {
            // Toast.success("错误");
            this.mistake = true;
            this.favorite = true;
            this.statistics = 2;
            this.errors++;

            // 当用户答题错误时
            this.RightWrong = false;
            this.dui = false;
            this.FontSize = false;
            this.FontRed = true;
            this.FontBlue = false;

            // 储存当前状态

            let object = {
              rightAnswer: "", // 正确答案
              wrongAnswer: "", // 当打错时储存答案
              bePrepared: "", // 已经答过那道题
              index: "",
              qId: "" // 题的id
            }; // 数组中添加对象
            object.rightAnswer = answer;
            object.wrongAnswer = id;
            object.bePrepared = this.sequence;
            object.qId = qId;
            // console.log("我是：" + this.sequence);
            this.database[this.sequence] = object;
            // console.log(this.database);

            /**
             * 当答错题时，inaccuracy来储存错误的答案
             * 用store来储存整的答案
             * array用来储存正确和错误的答案
             */
            this.inaccuracy[this.sequence] = id;
            this.store[this.sequence] = answer;
            this.array[this.sequence] = 2;
          }
        }
        // A选项结束

        // B 选项
        if (id == "B") {
          if (id == answer) {
            this.statistics = 1;
            this.correct++;
            // Toast.success("正确");
            // 当答题正确时
            this.BRightWrong = false;
            this.Bdui = true;
            this.BFontSize = false;
            this.BFontBlue = true;
            this.BFontRed = false;
            // 储存当前状态
            let object = {
              rightAnswer: "", // 正确答案
              wrongAnswer: "", // 当打错时储存答案
              bePrepared: "", // 已经答过那道题
              index: "",
              qId: "" // 题的id
            }; // 数组中添加对象
            object.rightAnswer = answer;
            object.wrongAnswer = id;
            object.bePrepared = this.sequence;
            object.qId = qId;
            // console.log("我是：" + this.sequence);
            this.database[this.sequence] = object;
            // console.log(this.database);

            if (this.checked) {
              this.autoTimer = setInterval(() => {
                this.$refs.checkbox.next();
                clearInterval(this.autoTimer);
                // return;
              }, 100);
            }
            //
            // console.log("当前页数" + this.pagination);
            this.result[this.sequence] = answer;
            this.array[this.sequence] = 1;
          } else {
            // Toast.success("错误");
            this.mistake = true;
            this.favorite = true;
            this.statistics = 2;
            this.errors++;

            // 当用户答题错误时
            this.BRightWrong = false;
            this.Bdui = false;
            this.BFontSize = false;
            this.BFontRed = true;
            this.BFontBlue = false;

            // 储存当前状态
            let object = {
              rightAnswer: "", // 正确答案
              wrongAnswer: "", // 当打错时储存答案
              bePrepared: "", // 已经答过那道题
              index: "",
              qId: "" // 题的id
            }; // 数组中添加对象
            object.rightAnswer = answer;
            object.wrongAnswer = id;
            object.bePrepared = this.sequence;
            object.qId = qId;
            // console.log("我是：" + this.sequence);
            this.database[this.sequence] = object;
            // console.log(this.database);

            // console.log("当前页数" + this.pagination);
            /**
             * 当答错题时，inaccuracy来储存错误的答案
             * 用store来储存整的答案
             * array用来储存正确和错误的答案
             */
            this.inaccuracy[this.sequence] = id;
            this.store[this.sequence] = answer;
            this.array[this.sequence] = 2;
          }
        }
        // B选项结束

        // C选项
        if (id == "C") {
          if (id == answer) {
            this.statistics = 1;
            this.correct++;
            // Toast.success("正确");
            // 当答题正确时
            this.CRightWrong = false;
            this.Cdui = true;
            this.CFontSize = false;
            this.CFontBlue = true;
            this.CFontRed = false;
            // 储存当前状态
            let object = {
              rightAnswer: "", // 正确答案
              wrongAnswer: "", // 当打错时储存答案
              bePrepared: "", // 已经答过那道题
              index: "",
              qId: "" // 题的id
            }; // 数组中添加对象
            object.rightAnswer = answer;
            object.wrongAnswer = id;
            object.bePrepared = this.sequence;
            object.qId = qId;
            // console.log("我是：" + this.sequence);
            this.database[this.sequence] = object;
            // console.log(this.database);

            if (this.checked) {
              this.autoTimer = setInterval(() => {
                this.$refs.checkbox.next();
                clearInterval(this.autoTimer);
                // return;
              }, 100);
            }
            //
            // console.log("当前页数" + this.pagination);
            this.result[this.sequence] = answer;
            this.array[this.sequence] = 1;
          } else {
            // Toast.success("错误");
            this.mistake = true;
            this.favorite = true;
            this.statistics = 2;
            this.errors++;

            // 当用户答题错误时
            this.CRightWrong = false;
            this.Cdui = false;
            this.CFontSize = false;
            this.CFontBlue = false;
            this.CFontRed = true;

            // 储存当前状态
            let object = {
              rightAnswer: "", // 正确答案
              wrongAnswer: "", // 当打错时储存答案
              bePrepared: "", // 已经答过那道题
              index: "",
              qId: "" // 题的id
            }; // 数组中添加对象
            object.rightAnswer = answer;
            object.wrongAnswer = id;
            object.bePrepared = this.sequence;
            object.qId = qId;
            // console.log("我是：" + this.sequence);
            this.database[this.sequence] = object;
            // console.log(this.database);

            // console.log("当前页数" + this.pagination);
            /**
             * 当答错题时，inaccuracy来储存错误的答案
             * 用store来储存整的答案
             * array用来储存正确和错误的答案
             */
            this.inaccuracy[this.sequence] = id;
            this.store[this.sequence] = answer;
            this.array[this.sequence] = 2;
          }
        }
        // C选项结束

        // D 选项
        if (id == "D") {
          if (id == answer) {
            this.statistics = 1;
            this.correct++;
            // Toast.success("正确");
            // 当答题正确时
            this.DRightWrong = false;
            this.Ddui = true;
            this.DFontSize = false;
            this.DFontBlue = true;
            this.DFontRed = false;
            // 储存当前状态
            let object = {
              rightAnswer: "", // 正确答案
              wrongAnswer: "", // 当打错时储存答案
              bePrepared: "", // 已经答过那道题
              index: "",
              qId: "" // 题的id
            }; // 数组中添加对象
            object.rightAnswer = answer;
            object.wrongAnswer = id;
            object.bePrepared = this.sequence;
            object.qId = qId;
            // console.log("我是：" + this.sequence);
            this.database[this.sequence] = object;
            // console.log(this.database);
            if (this.checked) {
              this.autoTimer = setInterval(() => {
                this.$refs.checkbox.next();
                clearInterval(this.autoTimer);
                // return;
              }, 100);
            }
            //
            // console.log("当前页数" + this.pagination);
            this.result[this.sequence] = answer;
            this.array[this.sequence] = 1;
          } else {
            // Toast.success("错误");
            this.mistake = true;
            this.favorite = true;
            this.statistics = 2;
            this.errors++;

            // 当用户答题错误时
            this.DRightWrong = false;
            this.Ddui = false;
            this.DFontSize = false;
            this.DFontRed = true;
            this.DFontBlue = false;

            // 储存当前状态
            let object = {
              rightAnswer: "", // 正确答案
              wrongAnswer: "", // 当打错时储存答案
              bePrepared: "", // 已经答过那道题
              index: "",
              qId: "" // 题的id
            }; // 数组中添加对象
            object.rightAnswer = answer;
            object.wrongAnswer = id;
            object.bePrepared = this.sequence;
            object.qId = qId;
            // console.log("我是：" + this.sequence);
            this.database[this.sequence] = object;
            // console.log(this.database);

            // console.log("当前页数" + this.pagination);
            /**
             * 当答错题时，inaccuracy来储存错误的答案
             * 用store来储存整的答案
             * array用来储存正确和错误的答案
             */
            this.inaccuracy[this.sequence] = id;
            this.store[this.sequence] = answer;
            this.array[this.sequence] = 2;
          }
        }
        // D 选项结束
        console.log(this.database);
      }
    },

    reveal() {
      // 控制题号显示隐藏
      if (this.show) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    // 是监听事件
    onChange(index) {
      console.log(index);
      this.ClearAway();
      this.image = false;
      // console.log("当前页：" + this.sequence, "翻后的当前页" + index);
      if (this.sequence < index) {
        // 如果是答对题了，就在数组对用的地方添加1，
        if (this.statistics == 1) {
          // this.array[this.pagination] = 1;
          this.statistics = 0;
        }
        if (this.statistics == 2) {
          // 如果打错，就往数组里添加2，在让statistics等于0，让下一题可以点击
          // this.array[this.pagination] = 2;
          this.statistics = 0;
        }
        // 往下翻的时候判断是否已经答题
        if (this.array[index] == 1) {
          // console.log("下翻对");
          this.mistake = false;
          this.favorite = false;
          this.statistics = 1;
          // console.log(this.database);
          // console.log(index);
          if (this.database[index].wrongAnswer == "A") {
            this.RightWrong = false;
            this.dui = true;
            this.FontBlue = true;
            this.FontRed = false;
            this.FontSize = false;
          }
          if (this.database[index].wrongAnswer == "B") {
            this.BRightWrong = false;
            this.Bdui = true;
            this.BFontBlue = true;
            this.BFontRed = false;
            this.BFontSize = false;
          }
          if (this.database[index].wrongAnswer == "C") {
            this.CRightWrong = false;
            this.Cdui = true;
            this.CFontBlue = true;
            this.CFontRed = false;
            this.CFontSize = false;
          }
          if (this.database[index].wrongAnswer == "D") {
            this.DRightWrong = false;
            this.Ddui = true;
            this.DFontBlue = true;
            this.DFontRed = false;
            this.DFontSize = false;
          }
        }
        if (this.array[index] == 2) {
          // console.log("下翻错");
          // console.log(this.database[index]);
          this.mistake = true;
          this.favorite = true;
          this.statistics = 1;
          if (this.database[index].wrongAnswer == "A") {
            this.RightWrong = false;
            this.dui = false;
            this.FontBlue = false;
            this.FontRed = true;
            this.FontSize = false;
          }
          if (this.database[index].wrongAnswer == "B") {
            this.BRightWrong = false;
            this.Bdui = false;
            this.BFontBlue = false;
            this.BFontRed = true;
            this.BFontSize = false;
          }
          if (this.database[index].wrongAnswer == "C") {
            this.CRightWrong = false;
            this.Cdui = false;
            this.CFontBlue = false;
            this.CFontSize = false;
            this.CFontRed = true;
          }
          if (this.database[index].wrongAnswer == "D") {
            this.DRightWrong = false;
            this.Ddui = false;
            this.DFontBlue = false;
            this.DFontSize = false;
            this.DFontRed = true;
          }
        }
        // 往下翻，如果对应的数组是undefined，则可以继续答题，如果不是，咋不能答题
        if (this.array[index] == undefined) {
          // console.log("下翻未答");
          this.mistake = false;
          this.favorite = false;
          this.statistics == 0;
        }

        this.sequence = index;
        // console.log("往下翻：答对的题数组" + this.result);
      } else {
        if (this.array[index] == 1) {
          // console.log("上翻对");
          // console.log(this.database);
          // console.log("下标" + index);
          this.mistake = false;
          this.favorite = false;
          if (this.database[index].wrongAnswer == "A") {
            this.RightWrong = false;
            this.dui = true;
            this.FontBlue = true;
            this.FontRed = false;
            this.FontSize = false;
          }
          if (this.database[index].wrongAnswer == "B") {
            this.BRightWrong = false;
            this.Bdui = true;
            this.BFontBlue = true;
            this.BontRed = false;
            this.BFontSize = false;
          }
          if (this.database[index].wrongAnswer == "C") {
            this.CRightWrong = false;
            this.Cdui = true;
            this.CFontBlue = true;
            this.CFontRed = false;
            this.CFontSize = false;
          }
          if (this.database[index].wrongAnswer == "D") {
            this.DRightWrong = false;
            this.Ddui = true;
            this.DFontBlue = true;
            this.DFontRed = false;
            this.DFontSize = false;
          }
        }
        if (this.array[index] == 2) {
          // console.log("上翻错");
          // console.log(this.database);
          // console.log("下标" + index);
          this.mistake = true;
          this.favorite = true;
          if (this.database[index].wrongAnswer == "A") {
            this.RightWrong = false;
            this.dui = false;
            this.FontBlue = false;
            this.FontRed = true;
            this.FontSize = false;
          }
          if (this.database[index].wrongAnswer == "B") {
            this.BRightWrong = false;
            this.Bdui = false;
            this.BFontBlue = false;
            this.BFontRed = true;
            this.BFontSize = false;
          }
          if (this.database[index].wrongAnswer == "C") {
            this.CRightWrong = false;
            this.Cdui = false;
            this.CFontBlue = false;
            this.CFontRed = true;
            this.CFontSize = false;
          }
          if (this.database[index].wrongAnswer == "D") {
            this.DRightWrong = false;
            this.Ddui = false;
            this.DFontBlue = false;
            this.DFontRed = true;
            this.DFontSize = false;
          }
        }
        if (this.array[index] == undefined) {
          // console.log("上翻未答");
          this.mistake = false;
          this.favorite = false;
          this.statistics = 0;
        }
        this.pagination--;
        // console.log("往回翻this.pagination：" + this.pagination);
        // console.log("往回翻index：" + index);
        // console.log("数组" + this.array);
        this.sequence = index;
      }
      // console.log(index + 1);
    },
    // 当点击题号的时候跳转到这一题
    selectTopic(index) {
      this.ClearAway();
      this.$refs.checkbox.swipeTo(index);
      this.sequence = index;
      this.show = false;
    },

    // 清除
    ClearAway() {
      // A选项
      this.RightWrong = true; // 当点击选项之后，判断对和错，如果是错的就显示图片，对就不变
      this.dui = false; // 用来控制对的显示和隐藏
      this.FontBlue = false; // 当答完题之后，如果要是答对，就显示
      this.FontRed = false; // 当答完题之后，如果要是答错，就显示
      this.FontSize = true; // 未答题之前，显示的
      // B 选项
      this.BRightWrong = true; // 当点击选项之后，判断对和错，如果是错的就显示图片，对就不变
      this.Bdui = false; // 用来控制对的显示和隐藏
      this.BFontBlue = false; // 当答完题之后，如果要是答对，就显示
      this.BFontRed = false; // 当答完题之后，如果要是答错，就显示
      this.BFontSize = true; // 未答题之前，显示的
      // B 选项
      this.CRightWrong = true; // 当点击选项之后，判断对和错，如果是错的就显示图片，对就不变
      this.Cdui = false; // 用来控制对的显示和隐藏
      this.CFontBlue = false; // 当答完题之后，如果要是答对，就显示
      this.CFontRed = false; // 当答完题之后，如果要是答错，就显示
      this.CFontSize = true; // 未答题之前，显示的
      // D 选项
      this.DRightWrong = true; // 当点击选项之后，判断对和错，如果是错的就显示图片，对就不变
      this.Ddui = false; // 用来控制对的显示和隐藏
      this.DFontBlue = false; // 当答完题之后，如果要是答对，就显示
      this.DFontRed = false; // 当答完题之后，如果要是答错，就显示
      this.DFontSize = true; // 未答题之前，显示的
    },

    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>
<style></style>
